﻿using Bootstrap5.Abstractions;

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

namespace Bootstrap5;

[CssClass("offcanvas")]
public class Offcanvas:BootstrapChildContentComponentBase
{
    /// <summary>
    /// The placement of component. Default is <see cref="Placement.Left"/> .
    /// </summary>
    [Parameter] [CssClass("offcanvas-")] public Placement Placement { get; set; } = Placement.Left;
    [Parameter] public RenderFragment HeadContent { get; set; }
    [Parameter][CssClass("show")] public bool Active { get; set; }
    [Parameter][DataTrigger("scroll")] public bool Scrollable { get; set; }
    [Parameter] [DataTrigger("backdrop")] public bool Backdrop { get; set; } = true;
    [Parameter] [DataTrigger("keyboard")] public bool Keyboard { get; set; } = true;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, GetHtmlTagName());
        BuildCommonAttributes(builder);
        builder.AddAttribute(20, "tabindex", -1);
        builder.AddContent(30, (RenderFragment)(child =>
        {
            if (HeadContent is not null)
            {
                child.OpenElement(0, "div");
                child.AddAttribute(1, "class", "offcanvas-header");
                child.AddContent(2, (RenderFragment)(header =>
                {
                    header.OpenElement(0, "div");
                    header.AddContent(1, HeadContent);
                    header.CloseElement();

                    header.OpenComponent<CloseButton>(10);
                    header.AddAttribute(11, nameof(CloseButton.CssClass), Css.Text(Text.Reset));
                    builder.AddAttribute(12, nameof(CloseButton.Trigger), Bootstrap5.Trigger.Dismiss(DismissName.Offcanvas));
                    header.CloseComponent();
                }));
                child.CloseElement();
            }

            child.OpenElement(5, "div");
            child.AddAttribute(6, "class", "offcanvas-body");
            child.AddContent(7, ChildContent);
            child.CloseElement();
        }));
        builder.CloseElement();
    }

}
